
<div class="pop_up">
    <div class="pop_up_main">
        <div class="pop_up_tab">
            <div class="tab attrSetTab">
                <a href="javascript:void(0)" rel="diy_baseSet" class="on">基本设置</a>
            </div>
        </div>
        <div class="pop_up_box">
            <ul class="pop_up_box_form" id="diy_baseSet">
              <li>
                    <div class="c1">
                        数据源：
                    </div>
                    <div class="c2">
                        <label>
                            <input name="source" rel="not_input" type="radio" value="all" checked="checked" class="param_post radio_select in_mr5" />全部微博
                        </label>&nbsp;
                        <label>
                            <input name="source" rel="user_input" class="param_post radio_select in_mr5" type="radio" value="user"/>指定用户微博
                        </label>&nbsp;
                        <label>
                            <input name="source" rel="topic_input" class="param_post radio_select in_mr5" type="radio" value="topic"/>话题微博
                        </label>&nbsp;
                        <div id="user_input" class="param_select" style="display:none;">
                           {:W('SearchUser', array('uids'=>$attr['users'], 'name'=>'searchuid','follow'=>0, 'max'=>0,'noself'=>0))}
                        </div>
                        <div id="topic_input" class="param_select" style="display:none;">
                        	<input type="text" id="topic" name="topic" value="" class="param_post text"/>
                        </div>
                    </div>
                </li>
            
                <li>
                    <div class="c1">
                        标题：
                    </div>
                    <div class="c2">
                        <input id="title" value="" class="param_post text"/>
                    </div>
                </li>
                                <li>
                    <div class="c1">
                        显示类型：
                    </div>
                    <div class="c2">
                        <input id="type" name="type" type="radio" value="all" checked="checked" class="param_post radio"/>全部
                        <input id="type" name="type" type="radio" value="post" class="param_post radio"/>原创
                        <input id="type" name="type" type="radio" value="postimage" class="param_post radio"/>图片
                        <input id="type" name="type" type="radio" value="postfile" class="param_post radio"/>附件
                    </div>
                </li>
								                  <li>
                    <div class="c1">
                        展示数量：
                    </div>
                    <div class="c2">
                        <input id="limit" value="10" class="param_post text"/>
                    </div>
                    </li>
                    <li>
                                        <div class="c1">
                        排序：
                    </div>
                    <div class="c2">
                        <select name="u" id="order" class="param_post text">
                            <option value="publish_time" selected="selected">按发表时间</option>
                            <option value="comment_count">按评论数</option>
                        </select>
                         <select name="u" id="order_t" class="param_post text">
                            <option value="DESC" selected="selected">倒序（新到旧，大到小）</option>
                            <option value="ASC">正序（旧到新，小到大）</option>
                        </select>
                    </div>
                    </li>
                    								                  <li>
                    <div class="c1">
                        展示方式：
                    </div>
                    <div class="c2">
                       <select name="u" id="style" class="param_post text">
                            <option value="list" selected="selected">列表展示</option>
                           	<!-- <option value="falls">瀑布流展示</option> -->
                        </select>
                    </div>
                    </li>
                     <li>
                    <div class="c1">
                        模板高度：
                    </div>
                    <div class="c2">
                        <input id="tplHeight" value="" class="param_post text"/>(请输入完整高度。px为单位。可以为百分比)
                    </div>
                </li>
 		<li>
                    <div class="c1">
                        右角链接：
                    </div>
                    <div class="c2">
                        <ul id="diy_links_items">
                            <li class="link_items1">
                                标题: <input type="text" rel="linkItemsComment1" class="linkItems" />链接：<input type="text" id="linkItemsComment1"/>
                                <a href="javascript:void(0)" class="dellinkHref" rel="1">删除</a>
                            </li>
                            <li class="link_items2">
                                标题: <input type="text" rel="linkItemsComment2" class="linkItems" />链接：<input type="text" id="linkItemsComment2"/><a href="javascript:void(0)" class="dellinkHref" rel="2">删除</a>&nbsp;&nbsp;<a href="javascript:void(0)" class="addlinkHref" rel="2">增加</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div id="preview" class="preview_r">
    	
    </div>
</div>
<script>
M(document.getElementById('diy_baseSet'));
                                	var index= '{$index}';
                                	var layout = '{$layout}';
                                	var parentId = '{$parentId}';
                                	var id = '{$id}';
                                	var namespace = '{$_GET['tagName']}';
                                    var postData = new Array();
                                    var defaultAttr = new Array();
                                    var hasDefault = false;
                                    var sign = "{$_GET['sign']}"
                                    var tplData = new Array();
                                    var defaultlinkCount = '{$tabCount}' || 2;
                                    var linkItem = '';
            						<php>if(!empty($attr)){</php>
            							hasDefault = true;
            						<php>}</php>
            				
                            <volist name="attr" id="vo">
								<php>if($key == 'head_link'){</php>
									defaultAttr["{$key}"] = {$vo};
								<php>}else{</php>
            						defaultAttr["{$key}"] = "{$vo}";
								<php>}</php>
            				</volist>
            				//重新监听事件
            				
            		
            				
                            $(function(){
                                $('.radio_select').click(function(){
                                    if ($(this).attr('checked')) {
                                        $('#' + $(this).attr('rel')).show();
                                        $('#' + $(this).attr('rel') + " textarea").focus();
                                    }
                                    $('.param_select').not($('#' + $(this).attr('rel'))).hide();
                                })
                            	if (hasDefault) {
                                    $('.param_post').each(function(){
                                        if ($(this).attr('type') == "radio") {
                                            var name = $(this).attr('name');
                                            if ($(this).val() == defaultAttr[name]) {
                                               		$(this).click();
            										if(name == "source"){
            											var tempId = $(this).attr('rel');
            											$('#' + tempId).show();
            	                                        $('#' + tempId + " textarea").focus();
            											$('#' + tempId + " select").focus();
            	                                        $('.param_select').not($('#' + tempId)).hide();
            										}
                                            }
                                        }
                                      	else{
            								if( !$(this).attr('multiple') || $(this).attr('multiple') == 'undefined'){
            									$(this).val(defaultAttr[$(this).attr('id')]);
            								}
            							}
                                    });
									for(var one in defaultAttr["head_link"]){
										if(one <=1){
											var tempId = parseInt(one)+1;
											$('.link_items'+tempId+' input:first').val(defaultAttr["head_link"][one]['title']);
											$('#linkItemsComment'+tempId).val(defaultAttr["head_link"][one]['url']);
										}
									}
                               }
                           				   headlink();
                    });
    				
    												function headlink(){
    													linkItem = $('#diy_links_items').children(':first').clone();
    				    								$('.dellinkHref').live('mouseup',function(){
    				    									var rel = $(this).attr('rel');
    				    									dellinkItems(rel);
    				    									return false;
    				    								});
    				    								$('.addlinkHref').live('mouseup',function(){
    				    									var rel = $(this).attr('rel');
    				    									addlinkItems($(this),rel);
    				    									return false;
    				    								});
    												}
    												function dellinkItems(itemCount){
            											$('.link_items'+itemCount).remove();
            										}
            						
    				        						function addlinkItems(_this,itemCount){
    				        							var newItem = linkItem.clone();
    				    								var temp = _this.clone();
    				        							var rel = _this.attr('rel');
    													defaultlinkCount ++;
    				    								_this.remove();
    				    								temp.attr('rel',defaultlinkCount);
    				        							newItem.removeClass().addClass('link_items'+defaultlinkCount)
    				    													 .find('a')
    				    													 .attr('rel',defaultlinkCount)
    				    													 .end()
    																		 .find('input:first')
    																		 .attr('rel','linkItemsComment'+defaultlinkCount)
    																		 .end()
    																		 .find('input[id=linkItemsComment1]')
    																		 .attr('id','linkItemsComment'+defaultlinkCount)
    																		 .end()
    				    													 .find('span')
    				    													 .append('&nbsp;')
    				    													 .append(temp);
    				        							$('#diy_links_items').append(newItem);
    				        						}
   function preview(){
                                var sendData = getPostData();
                                $.ajax({
                                    type: "POST",
                                    url: SITE_URL + '/index.php?app=page&mod=Diy&act=previewModel',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function(result){
                                        $('#preview').html(result.html);
                                        var content = '<div id="diy_copyHtmlContent">\
                                            		复制源代码:<input type="text" id="copyHtmlContent" onclick="select();" style="width:150px;" />\
                                        		</div>'
										var widget = '<div id="diy_copyHtmlContent">\
                                            		复制标签:<input type="text" id="copyWidgetContent" onclick="select();" style="width:150px;" />\
                                        		</div>';
                                        $('#preview').append(content);
										$('#preview').append(widget);
                                        $('#diy_copyHtmlContent');
                                        $('#copyHtmlContent').val(result.html).bind('click',function(){
											copyToClipboard(result.html);
										});
										$('#copyWidgetContent').val(result.widget).bind('click',function(){
											copyToClipboard(result.widget);
										});
										M(document.getElementById('preview'));
										//$('#copyHtml').click();
                                    }
                                });
                            }
                                	
                            function savemodel(){
                                var sendData = getPostData();
                                $.ajax({
                                    type: "POST",
                                    url: SITE_URL + '/index.php?app=page&mod=Diy&act=saveModel',
                                    data: sendData,
                                    dataType: 'json',
                                    success: function(result){
                                        //var jsonData = eval('('+result+')');
                                        frameArray[parentId][layout][index] = result['sign'];
                                        if ($('#' + id).html() == null) {
                                            $('#placeholder').html(result['html']);
                                            $('#placeholder').removeAttr('class').removeAttr('style').addClass('mb10').attr('id', id).attr('rel', namespace).attr('sign', result['sign']).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\'' + id + '\',\'' + namespace + '\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                        }
                                        else {
                                            $('#' + id).html(result['html']).attr('sign', result['sign']);
                                            $('#' + id).prepend('<div class="diy_edit"><div class="ico_edit"><a href="javascript:void(0)" onclick="updateDiyModel(\'' + id + '\',\'' + namespace + '\')" class="ico_diyedit" title="设置">设置</a> <a href="javascript:void(0)" class="ico_diydel" onclick="deleteDiy(\'' + id + '\')" title="删除">删除</a></div></div>');
                                            
                                        }
                                    }
                                });
                            }
                            function getPostData(){
								
                                var data = new Array();
                                var result;
                                $('.param_post').each(function(){
                                    if ($(this).attr('type') == "radio") {
                                        if ($(this).attr('checked')) {
                                            var postKey = 'PARAM_' + $(this).attr('name');
                                        }
                                        else {
                                            return true;
                                        }
                                    }
                                    else {
                                        var postKey = 'PARAM_' + $(this).attr('id');
                                    }
                                    data[postKey] = $(this).val();
                                    
                                });
                                var result = 'tagName=' + namespace;
    							
                                //取得参数值
                                var newTempArray = new Array();
                                $('.linkItems').each(function(){
                                    var value = $('#' + $(this).attr('rel')).val().replace(/&/g, "[@]");
                                    newTempArray.push({
                                        'title': $(this).val(),
                                        'url': value
                                    });
                                });
                                
                                for (var index in newTempArray) {
                                    result += '&head_link[' + index + '][title]=' + newTempArray[index]['title'] + '&head_link[' + index + '][url]=' + newTempArray[index]['url'];
                                }
    							var user = $('#search_uids').val();
    							if( user != ""){
    								data['PARAM_user'] = user;
     							}
    							if($('#style').val().indexOf('custom') != -1){
    								var value = customTpl.replace(/&/g,"[@]");
    								data['customContent'] = value;
    							}
                                for (var one in data) {
                                    result += '&' + one + '=' + data[one];
                                }
								
                                return result;
                            }
                            
            				
        					$('.attrSetTab a').click(function(){
        						var rel = $(this).attr('rel');
    							if(rel == "diy_customContent"){
    								getTpl($('#style').val());
    							}else{
    								if($('#customContent').val() != TplContent){
    									time = time + new String( customTplCount++ );
    									customTpl = $('#customContent').val();
    									var last = $('#style option:last').val();
    									if( last.indexOf('custom') == -1 ){
    										$('#style').append('<option value="'+time+'" selected>自定义模板</option>');
    									}else{
    										$('#style option:last').val(time).attr('selected','selected');
    									}
    								}
    							}
    							
    							$(this).addClass('on');
    							$('#tb_content_list').children('p').show();
        						$('.attrSetTab').children().not($(this)).removeClass('on');
        						$('.pop_up_box').children().not($('#' + rel)).hide();
        						$('#'+rel).show();
        					})
        					
            				function editTpl(tpl){
        						getTpl(tpl);
    							$('.attrSetTab a').each(function(){
    								if($(this).attr('rel') == 'diy_baseSet'){
    									$(this).removeClass('on');
    								}else{
    									$(this).addClass('on');
    								}
    							})
    							$('.attrSetTab a[rel=diy_customContent]').addClass('on');
    							$('.attrSetTab a[rel=diy_baseSet]').removeClass('on');
    							
    							//保存模板
    							$('#diy_saveTpl').click(function(){
    								$('.attrSetTab a[rel=diy_baseSet]').click();	
    							})
    							$('#tb_content_list').children('p').hide();
        						$('#diy_baseSet').hide();
        						$('#diy_customContent').show();
            				}
        					function getTpl(tpl){
    
    							
    							if (tpl != time) {
    								if(typeof(tplData[tpl]) != 'undefined'){
    									$('#customContent').val(tplData[tpl]);
    									TplContent = tplData[tpl];
    									return ;
    								}
    								
    								$.post(APP + '&mod=Diy&act=getTpl', {
    									tpl: tpl,
    									tagName: namespace,
    									sign:sign
    								}, function(result){
    									$('#customContent').val(result);
    									tplData[tpl] = result;
    									TplContent = result;
    									$('#style').val(tpl);
    								});
    							}else{
    								$('#customContent').val(customTpl);
    							}
        					}
</script>
